import React, { useState, useEffect }  from 'react'
import { Form, Select, Input, Col, Table, Card, DatePicker, Cascader } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchStores } from '@/services/dataCenter/macAddress'
import { fetchStoreCatList } from '@/services/dataCenter/proxyData'
import moment from 'moment'
const {RangePicker} = DatePicker
import cityOptions from '@/utils/city'

const StoreData = props => {
  const { form, stores } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(0)
  const [dataList, setDataList] = useState([])
  const [storeCatList, setStoreCatList] = useState([])
  const [provinceId, setProvinceId] = useState('') // 省
  const [cityId, setCityId] = useState('') // 市
  const [areaId, setAreaId] = useState('') // 区
  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
  })


  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetchStores({
        ...param,
        ...values
      })
    })
  }
  useEffect(() => {
    // 获取当前商户下的所有门店
    _fetchStores(param)
    // 获取行业
    _fetchStoreCatList()
  }, [])
  const _fetchStores = async (param) => {
    const res = await fetchStores(param)
    if (res.code == 0 && res.data) {
      setDataList(res.data)
      setTotalPage(res.total)
    }
  }
  const _fetchStoreCatList = async () => {
    const res = await fetchStoreCatList()
    if (res.code == 0 && res.data) {
      console.log(res)
      setStoreCatList(res.data)
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _fetchStores({
        ...param,
        pageNo: page,
      })
    }
  }
  // 选择地址
  const selectAddress = (value, arr) => {
    setProvinceId(arr[0] ? arr[0].code : '')
    setCityId(arr[1] ? arr[1].code : '')
    setAreaId(arr[2] ? arr[2].code : '')
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '门店名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '门店地址',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '所属行业',
      dataIndex: 'classifyName',
      key: 'classifyName',
    },
    {
      title: '商户电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '用户浏览数',
      dataIndex: 'all_browse',
      key: 'all_browse'
    }
  ]
  const dateFormat = 'YYYY-MM-DD'
  // 查询条件
  const getFields = () => {
    return (<>
      <Col span={8}>
        <Form.Item label="店铺名称" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('storeName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="行业" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('parentCatId', {})
            (<Select>
              {storeCatList && storeCatList.map(m => <Select.Option key={m.id} value={m.id}>{m.catName}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="加入时间" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`dateTime`, {
            defaultValue: [moment(), moment()]
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="所在城市" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} >
          {getFieldDecorator('city', {})
            (<Cascader options={cityOptions} onChange={selectAddress} placeholder="请选择省市区" />,)}
        </Form.Item>
      </Col>
    </>)
  }
  return (<PageHeaderWrapper>
    <Card>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    </Card>
    <Card style={{marginTop: '10px'}}>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={dataList}/>
    </Card>
  </PageHeaderWrapper>)
}

export default Form.create()(StoreData)


